<template>
	<view class="content">

		<view class="list">
			<view class="card" v-for="(item,index) in list" :key="index" @click="tabAct(item.id)">
				<view class="pic">
					<img :src="item.prizesImage" alt="">
				</view>
				<view class="name">奖品名称：{{item.prizesName}}</view>
				<view class="name" v-if="item.showNumber">奖品数量：{{item.prizesSum}}</view>
				<view class="name" v-if="item.showPeople">参与人数：{{item.pnum}}</view>
				<view class="other">
					<view class="name" style="display: flex;flex-direction: row;align-items: center;">
						<view style="padding-left: 20rpx;">由</view>
						<view style="padding-left: 20rpx;">
							<img :src="item.avater" alt="" style="width: 80rpx;height: 80rpx;border-radius: 40rpx;">
						</view>
						<view style="padding-left: 20rpx;">{{item.name}}</view>
						<view style="color: red;font-size: 24rpx;padding-left: 20rpx;">赞助</view>
					</view>
					<view class="btn">点击参与</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				navId: 0,
				list: [],

			}
		},
		onShow() {
			this.getlist()
		},
		onLoad() {
			this.getlist()
		},
		methods: {

			switchTab(id) {
				this.navId = id
				this.getlist(id)
				console.log(this.newarr)
			},

			getlist(id) {
				this.$api.request({
					url: this.$api.prizeList
				}).then((res) => {
					this.list = res.rows
					console.log(this.list);
				})
			},

			tabAct(prizesId) {
				uni.navigateTo({
					url: '/myPage/prize_com/components/addDetial?prizeId=' + prizesId
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100vw;
		height: 90vh;
		padding: 2vh 0;
		background: linear-gradient(to bottom, red, orange);



		.list {
			width: 94%;
			height: 90vh;
			margin: 0 auto;
			overflow: scroll;
			border-radius: 30rpx;

			.card {
				margin: 30rpx 0;
				width: 100%;
				// height: 40vh;
				background-color: #fff;
				border-radius: 30rpx;
				overflow: hidden;

				.pic {
					width: 100%;
					height: 25vh;

					img {
						padding: 2%;
						width: 96%;
						height: 96%;
					}
				}

				.name {
					width: 94%;
					padding: 0 3%;
					height: 8vh;
					line-height: 8vh;
					font-size: 36rpx;
					border-top: 1rpx solid #ccc;
				}

				.other {
					width: 100%;
					height: 7vh;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.name {
						flex: 1;
						width: 50%;
						height: 7vh;
						line-height: 7vh;
						font-size: 30rpx;
					}

					.btn {
						width: 26%;
						height: 5vh;
						margin: 1vh auto;
						line-height: 5vh;
						text-align: center;
						background-color: red;
						border-radius: 2vh 0 0 2vh;
						color: #fff;
					}
				}
			}
		}

		.list::-webkit-scrollbar {
			display: none;
			/* 隐藏滚动条 */
		}
	}
</style>